<template>
	<view>
		<!-- 轮播图片 -->
		<view v-if="slider.length > 0" class="m-bg-main">
			<u-toast ref="uToast"></u-toast>
			<u-swiper :list="slider" height="380" border-radius="0" indicator-pos="bottomCenter" mode="round" :interval="3000"></u-swiper>
		</view>

		<!-- 商品价格 -->
		<view v-if="goods.name" class="u-m-t-20 u-p-30 m-bg-main">
			<view class="goods-price-selling">
				<text v-if="specSelect.specs_stock > 0">￥{{ Number(specSelect.price_selling) || '' }}</text>
				<text v-else>库存不足</text>
			</view>
			<view class="goods-price-market">
				<text v-if="specSelect.specs_stock > 0">原价￥{{ Number(specSelect.price_market) || '' }}</text>
			</view>
			<view class="goods-name">{{ goods.name || '' }}</view>
		</view>

		<!-- 商品规格 -->
		<view v-if="goods.name" class="m-bg-main u-line-1 u-m-t-20 u-p-30" @click="showSelect = true">
			<text>已选择：</text>
			<text>{{ specSelect.name || '-' }}</text>
		</view>

		<!-- 商品详情 -->
		<view v-if="goods.name" class="goods-content u-m-t-20 m-bg-main">
			<u-divider class="u-p-10">商品详情</u-divider>
			<u-parse :html="goods.content" :tagStyle="parseStyle" :lazyLoad="true" :showWithAnimation="true"></u-parse>
			<view class="u-p-40"></view>
		</view>

		<!-- 底部导航 -->
		<view class="m-layout-bottom u-flex">
			<view class="u-flex-4">
				<view class="u-p-l-20 u-p-r-20 u-text-center">
					<u-icon name="home" label="商 城" label-pos="bottom" label-size="20" :size="35" :color="$u.color['contentColor']" @click="toGoodsHome()"></u-icon>
				</view>
			</view>
			<view class="u-flex-7"><u-button class="m-border-radius-0" throttleTime="10" :ripple="true" @click="showSelect = true" type="error">立即购买</u-button></view>
		</view>

		<!-- 规格选择器 -->
		<u-popup v-model="showSelect" mode="bottom" :closeable="true">
			<view class="u-p-30">
				<view class="u-flex">
					<view class="u-flex-3"><u-image :src="goods.cover" width="180" height="180"></u-image></view>
					<view class="u-flex-7">
						<view class="u-line-1 goods-name">{{ goods.name || '' }}</view>
						<view class="u-line-1 u-m-t-10">
							<view class="goods-price-selling">
								<text v-if="specSelect.specs_stock > 0">￥{{ Number(specSelect.price_selling) || '' }}</text>
								<text v-else>库存不足</text>
							</view>
							<view class="goods-price-market">
								<text v-if="specSelect.specs_stock > 0">原价￥{{ Number(specSelect.price_market) || '' }}</text>
							</view>
						</view>
						<view class="u-line-1 u-m-t-10">
							<text class="goods-spec">{{ specSelect.name || '' }}</text>
						</view>
					</view>
				</view>
				<view class="u-m-t-30">
					<view class="u-p-t-20" v-for="(item, idx1) in goodsSpces" :key="item.id">
						<view class="u-content-color u-line-1">{{ item.name }}</view>
						<view class="u-m-t-10 u-m-r-10 u-m-b-10 m-inline-block" v-for="(subitem, idx2) in item.list" :key="subitem.id">
							<u-tag
								:text="subitem.name"
								:type="subitem.active ? 'error' : 'info'"
								v-if="checkSpecItem(idx1, idx2)"
								@click="setSpecItem(idx1, idx2)"
								mode="plain"
							></u-tag>
							<u-tag v-else :text="subitem.name" type="info" mode="light"></u-tag>
						</view>
					</view>
				</view>
				<view class="u-m-t-30">
					<text class="u-content-color">购买数量：</text>
					<u-number-box v-model="goodsNumber" :max="goodsMaxStock" @change="setGoodsNumber"></u-number-box>
					<text class="u-light-color u-font-sm">（库存 {{ specSelect.specs_stock || 0 }} 件）</text>
				</view>
			</view>
			<u-button class="u-m-t-10 m-border-radius-0" throttleTime="10" :ripple="true" type="error" @click="gotoPreOrder()">确 定</u-button>
		</u-popup>
		<m-login ref="login"></m-login>
	</view>
</template>

<script>
export default {
	data() {
		return {
			code: '',
			goods: {},
			slider: [],
			goodsSpces: [],
			goodsItems: {},
			goodsNumber: 1,
			goodsMaxStock: 1,
			specSelect: {},
			showSelect: false,
			parseStyle: {
				img: 'width:100%;height:auto;line-height:1em;vertical-align:middle'
			}
		};
	},
	onLoad(opt) {
		this.code = opt.code;
	},
	mounted() {
		this.load();
	},
	// 下拉刷新处理
	onPullDownRefresh() {
		this.load();
		setTimeout(() => uni.stopPullDownRefresh(), 1000);
	},
	methods: {
		// 加载商品数据
		load() {
			this.getGoods(this.code);
		},
		// 跳转到商品首页
		toGoodsHome() {
			this.$u.route({
				type: 'tab',
				url: 'pages/goods/index'
			});
		},
		// 加载商品信息
		getGoods(code) {
			let that = this;
			this.$u.get('data/api.goods/getGoods', { code: code }).then(ret => {
				if (ret.code < 1 || ret.data.list.length < 1) {
					this.$u.message.alert('商品不存在').then(() => {
						this.toGoodsHome();
					});
				} else {
					that.goods = ret.data.list[0];
					// 轮播图片处理
					let slider = [];
					that.goods.slider.forEach(v => {
						slider.push({
							image: v
						});
					});
					that.slider = slider;
					// 规格价格处理
					that.goods.items.map(item => {
						that.goodsItems[item.goods_spec] = item;
					});
					// 商品规格处理
					let specs = [];
					for (let i in that.goods.specs) {
						let _state = true;
						let _specs = {
							list: [],
							name: that.goods.specs[i].name
						};
						for (let j in that.goods.specs[i].list) {
							if (that.goods.specs[i].list[j].check) {
								_specs.list.push({
									active: _state,
									name: that.goods.specs[i].list[j].name
								});
								_state = false;
							}
						}
						if (_specs.list.length > 0) {
							specs.push(_specs);
						}
					}
					that.goodsSpces = specs;
					that.setSpecItem(-1, -1);
				}
			});
		},
		// 检查规格状态
		checkSpecItem(idx1, idx2) {
			let gs1 = [];
			this.goodsSpces.forEach((v1, k1) => {
				v1.list.forEach((v2, k2) => {
					if (k1 < idx1 && v2.active) {
						gs1.push(v1.name + '::' + v2.name);
					} else if (k1 == idx1 && k2 == idx2) {
						gs1.push(v1.name + '::' + v2.name);
					}
				});
			});
			for (let i in this.goodsItems) {
				if (i.indexOf(gs1.join(';;')) === 0) {
					let item = this.goodsItems[i];
					if (item.stock_total - item.stock_sales > 0) {
						return true;
					}
				}
			}
			return false;
		},
		// 选择规格，若 idx = -1 只刷新选择器
		setSpecItem(idx1, idx2) {
			let gs = [];
			let ns = [];
			this.goodsSpces.forEach((v1, k1) => {
				v1.list.forEach((v2, k2) => {
					k1 == idx1 && (v2.active = k2 == idx2);
					if (v2.active) {
						ns.push(v2.name);
						gs.push(v1.name + '::' + v2.name);
					}
				});
			});
			var params = this.goodsItems[gs.join(';;')] || {};
			// 配置当前选择的属性
			this.specSelect = {
				name: ns.join(' '),
				goods_spec: params.goods_spec,
				price_market: params.price_market,
				price_selling: params.price_selling,
				specs_stock: Number(params.stock_total) - Number(params.stock_sales)
			};
			// 最大购买数量控制
			this.goodsMaxStock = this.specSelect.specs_stock;
		},
		// 前往订单处理
		gotoPreOrder(orderNo) {
			this.$refs.login.local().then(() => {
				let item = this.goodsItems[this.specSelect.goods_spec];
				if (item.stock_total - item.stock_sales < 1) {
					return false;
				}
				let data = {
					items: this.code + '@' + this.specSelect.goods_spec + '@' + this.goodsNumber
				};
				// 创建预订单并跳转
				this.$u.api.post('data/api.auth.order/add', data, true, false, true).then(ret => {
					this.$u.route({
						url: 'pages/order/xpay',
						type: 'redirect',
						params: {
							order: ret.data.order_no || ''
						}
					});
				});
			});
		},
		// 商品数据处理
		setGoodsNumber(e) {
			if (e.value > this.specSelect.specs_stock) {
				this.goodsNumber = this.specSelect.specs_stock;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.goods-name {
	font-size: 35rpx;
	margin-top: 20rpx;
}

.goods-spec {
	color: #666;
	font-size: 24rpx;
}

.goods-price-market {
	color: #999;
	font-size: 25rpx;
	display: inline-block;
	text-decoration: line-through;
}

.goods-price-selling {
	color: red;
	display: inline-block;
	font-size: 35rpx;
	font-weight: bold;
	margin-right: 15rpx;
}

.goods-content {
	color: $u-content-color;
	font-size: 32rpx;
	line-height: 1.8;
}

.m-layout-bottom {
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	position: fixed;
	background-color: #ffffff;
}
</style>
